import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Label } from 'recharts';

const PanelContainer = styled.div`
  width: 90%;
  height: 260px;
  background: rgba(10, 25, 41, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 5px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.8), transparent);
  }
  
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8));
  }
`;

const PanelHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
  }
`;

const PanelTitle = styled.div`
  font-size: 20px;
  font-weight: bold;
  color: #fff;
`;

const CustomTooltip = styled.div`
  background: rgba(10, 25, 41, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 4px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
`;

const LegendContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
`;

const LegendItem = styled.div`
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
`;

const LegendColor = styled.div<{color: string}>`
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: ${props => props.color};
  border-radius: 2px;
`;

interface PieChartPanelProps {
  title?: string;
  side?: 'left' | 'right';
}

// Custom label component to render values on the pie chart
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const renderCustomizedLabel = (props: any) => {
  const { cx, cy, midAngle, innerRadius, outerRadius, value } = props;
  const RADIAN = Math.PI / 180;
  // Position the label in the middle of the pie segment
  const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);

  return (
    <text 
      x={x} 
      y={y} 
      fill="#fff" 
      textAnchor="middle" 
      dominantBaseline="central"
      fontSize="14"
      fontWeight="bold"
    >
      {value}
    </text>
  );
};

const PieChartPanel: React.FC<PieChartPanelProps> = ({ title = "趋势分析", side = 'left' }) => {
  const [data, setData] = useState([
    { name: '类别A', value: 35 },
    { name: '类别B', value: 25 },
    { name: '类别C', value: 20 },
    { name: '类别D', value: 15 },
    { name: '类别E', value: 5 }
  ]);
  
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
  
  // 模拟数据更新
  useEffect(() => {
    const timer = setInterval(() => {
      setData(prevData => 
        prevData.map(item => ({
          ...item,
          value: Math.max(5, item.value + Math.floor(Math.random() * 5) - 2)
        }))
      );
    }, 10000);
    
    return () => clearInterval(timer);
  }, []);
  
  const renderCustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      return (
        <CustomTooltip>
          <p>{`${payload[0].name}: ${payload[0].value}%`}</p>
        </CustomTooltip>
      );
    }
    return null;
  };

  // Calculate total for percentage display
  const total = data.reduce((sum, item) => sum + item.value, 0);

  return (
    <PanelContainer>
      <PanelHeader>
        <PanelTitle>{title}</PanelTitle>
      </PanelHeader>
      <ResponsiveContainer width="100%" height="68%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={40}
            outerRadius={70}
            paddingAngle={5}
            dataKey="value"
            startAngle={90}
            endAngle={-270}
            label={renderCustomizedLabel}
            labelLine={false}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
            <Label
              value={total}
              position="center"
              fill="#fff"
              style={{ fontSize: '20px', fontWeight: 'bold' }}
            />
          </Pie>
          <Tooltip content={renderCustomTooltip} />
        </PieChart>
      </ResponsiveContainer>
      <LegendContainer>
        {data.map((entry, index) => (
          <LegendItem key={`legend-${index}`}>
            <LegendColor color={COLORS[index % COLORS.length]} />
            <span>{`${entry.name}: ${entry.value}`}</span>
          </LegendItem>
        ))}
      </LegendContainer>
    </PanelContainer>
  );
};

export default PieChartPanel; 